window.addEventListener("load", function () {
  var lunboa = document.querySelector(".sy_lunbo");
  var Ospan1 = document.querySelector(".lb_left");
  var Ospan2 = document.querySelector(".lb_right");
  var ul1 = document.querySelector(".lbpic");
  var ul2 = document.querySelector(".lb_yuan");
  var w = lunboa.offsetWidth;
  var num = 0;
  var ci = 0;
  var flag = true;
  lunboa.addEventListener("mouseenter", function () {
    Ospan1.style.display = "block";
    Ospan2.style.display = "block";
    clearInterval(timer);
    timer = null; //清除定时器变量
  });
  lunboa.addEventListener("mouseleave", function () {
    Ospan1.style.display = "none";
    Ospan2.style.display = "none";
    timer = setInterval(function () {
      Ospan2.click();
    }, 3000);
  });
  for (var i = 0; i < ul1.children.length; i++) {
    var li = document.createElement("li");
    li.setAttribute("data-index", i);
    ul2.appendChild(li);
    li.addEventListener("click", function () {
      for (var i = 0; i < ul2.children.length; i++) {
        ul2.children[i].style.backgroundColor = "";
      }

      this.style.backgroundColor = "#442818";
      var index = this.getAttribute("data-index");
      num = index;
      ci = index;
      move(ul1, -index * w);
    });
  }
  ul2.children[0].style.backgroundColor = "#442818";
  var first = ul1.children[0].cloneNode(true);
  ul1.appendChild(first);
  // 右边按钮
  Ospan2.addEventListener("click", function () {
    if (flag) {
      flag = false;
      if (num == ul1.children.length - 1) {
        ul1.style.left = 0;
        num = 0;
      }
      num++;
      move(ul1, -num * w, function () {
        flag = true;
      });
      ci++;
      if (ci == ul2.children.length) {
        ci = 0;
      }
      nod();
    }
  });
  // 左边按钮
  Ospan1.addEventListener("click", function () {
    if (flag) {
      if (num == 0) {
        num = ul1.children.length - 1;
        ul1.style.left = -num * w + "px";
      }
      num--;
      move(ul1, -num * w, function () {
        flag = true;
      });
      ci--;
      if (ci < 0) {
        ci = ul2.children.length - 1;
      }
      nod();
    }
  });

  function nod() {
    for (var i = 0; i < ul2.children.length; i++) {
      ul2.children[i].style.backgroundColor = "";
    }
    ul2.children[ci].style.backgroundColor = "#442818";
  }

  var timer = setInterval(function () {
    Ospan2.click();
  }, 3000);
});